<template>
    <div class="count">
        <h2>当前求和为：{{ sum }},其十倍为{{ bigSum }}</h2>
        <h2>学校：{{ school }} 地址：{{ address }}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="plus">加</button>
        <button @click="declare">减</button>
    </div>
    
</template>
    
<script setup lang="ts" name="Count">
    import {ref} from 'vue';
    import { useCountStore } from '@/store/count';
    import { storeToRefs } from 'pinia';
    //data
    let n = ref(1)
    const countStore = useCountStore();
    const {sum,school,address,bigSum} = storeToRefs(countStore)

    //methods
    function plus() {
    countStore.increment(n.value)
    }

    function declare() {
        countStore.sum -= n.value
    }

    //watch
    countStore.$subscribe((mutate,state)=>{
        console.log(mutate,state)
    })
</script>
    
<style scoped>
    .count {
      background-color: skyblue;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 0 10px;
    }
    select,button {
      margin: 0 5px;
      height: 25px;
    }
</style>